<template>
    <van-nav-bar title="邮箱认证" left-text="" left-arrow @click-left="goBack" />
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field v-model="LoginUser.email" name="email" label="邮箱" readonly placeholder="请输入邮箱"
                :rules="[{ required: true, message: '请填写邮箱' }]" />
            <van-field v-model="code" center  label="邮箱验证码" placeholder="请输入邮箱验证码" :rules="[{ required: true, message: '请填写邮箱验证码' }]">
                <template #button>
                    <van-button size="small" type="primary" @click="send" :disabled="isStatus">
                        <span v-if="!isStatus">发送验证码</span>
                        <van-count-down v-show="isStatus"  ref="countDown" :time="time" :format="format"  @finish="onFinish" :auto-start="false"/>
                    </van-button>
                </template>
            </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                提交
            </van-button>
        </div>
    </van-form>

</template>
<script setup>
const { proxy } = getCurrentInstance()
const LoginUser = reactive(proxy.$cookies.get('LoginUser') ? proxy.$cookies.get('LoginUser') : {})
const goBack = () => { proxy.$router.push('/business/index')}
const isStatus = ref(false)
const format = ref('ss秒')
const countDown = ref(null);
const time = ref(11 * 1000);
const code = ref('')
const send = async() =>{
    isStatus.value = true
    countDown.value.start();
    let result = await Api.sendemail({
        busid: LoginUser.id
    });
    if(result.code == 1)
    {
        success(result.msg);
    } else{
        error(result.msg);
    }
}
const onFinish = () => 
{
    isStatus.value = false;
    countDown.value.reset();
};
const onSubmit = async(values) => 
{
    let result = await Api.email({
        busid: LoginUser.id,
        code: code.value
    });
    if(result.code == 1)
    {
        success({
            message: result.msg,
            onClose: () => {
                goBack()
            }
        });

    } else{
        error(result.msg);
    }
};
</script>